
const { resolve } = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")


module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: resolve(__dirname, "bundle")
    },
    module: {
        rules: [
            // js兼容性处理：babel-loader @babel/preset-env @babel/core  将es6转换为es5及以下的语法
            //      1.基本的js兼容性处理：@babel/preset-env  只能转化为一些基本的语法（promise不行）
            //      2.全部的js兼容性处理：@babel/polyfill  只需要在js文件中引入即可
            //          问题是，将所有兼容性的代码全部引入，会使得体积变很大
            //      3.代码中需要进行的兼容性处理，就处理：按需加载---> core-js
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    // 预设：指示babel做怎样的兼容性处理
                    // 1/2.
                    // presets: ["@babel/preset-env"]
                    // 3.
                    presets: [
                        ["@babel/preset-env",
                            {
                                // 按需加载
                                useBuiltIns: "usage",
                                corejs: {
                                    version: 3
                                },
                                // 指定兼容性做到哪个版本的浏览器
                                targets: {
                                    chrome: "60",
                                    firefox: "60",
                                    ie: "9",
                                    safari: "10",
                                    edge: "17"
                                }
                            }]
                    ]
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    mode: "development"
}